
<!-- 
  父组件 和  子组件 的创建
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn2></cpn2>

    <!--
      疑问： cpn1 是 cpn2的子组件，能否直接用
      答案： 不能
      因为： 我们是直接使用 root 组件内容，
            root只暴露 cpn2 
    -->

    <hr>
    <!-- <cpn3></cpn3> -->
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    // 子组件
    const cpn1 = Vue.extend({
      template: `
        <div>
          <h2>1.我是子组件 cpn1</h2>
          <p>我是内容</p>
        </div>
      `
    })

    // 父组件
    const cpn2 = Vue.extend({
      template: `
        <div>
          <h2>2.我是父组件 cpn2</h2>
          <p>父 我是内容</p>
          <cpn1></cpn1>
        </div>
      `
      ,
      components: {
        cpn1,
      }
    })

    // 错误的写法
    // const cpn3 = Vue.extend({
    //   template: `
    //       <cpn1>
    //         <h2>2.我是子组件</h2>
    //         <p>子 我是内容</p>
    //       </cpn1>
    //   `
    //   ,
    //   components: {
    //     cpn1,
    //   }
    // })
    
    // root 组件
    const app = new Vue({
      el: '#app',
      components: {
        cpn2,
        // cpn3
      }
    })
  </script>
</body>
</html>